<template>
  <div class="q-pa-md text-center" >
    <div class="q-gutter-y-md" >
      <q-card>
        <q-tabs
            v-model="tab"
            dense
            class="text-grey"
            active-color="primary"
            indicator-color="primary"
            align="justify"
            narrow-indicator
        >
          <q-tab name="about" label="关于" />
          <q-tab name="notice" label="公告" />
          <q-tab name="updates" label="更新日志" />

          <q-tab name="yinsi" label="隐私协议" />
<!--          <q-tab name="movies" label="Movies" />-->
        </q-tabs>

        <q-separator />

        <q-tab-panels v-model="tab" animated>
          <q-tab-panel name="about">
            <AboutAbout></AboutAbout>
          </q-tab-panel>

          <q-tab-panel name="updates">
           <AboutUpdate></AboutUpdate>
          </q-tab-panel>
          <q-tab-panel name="notice">
           <AboutNotice></AboutNotice>
          </q-tab-panel>
          <q-tab-panel name="yinsi">
              <AboutYinSi></AboutYinSi>
          </q-tab-panel>
        </q-tab-panels>
      </q-card>


    </div>
  </div>
</template>

<script setup lang="ts">
import {ref} from 'vue'
import AboutAbout from "../layout/AboutAbout.vue";
import AboutUpdate from "../layout/AboutUpdate.vue";
import AboutYinSi from "../layout/AboutYinSi.vue";
import AboutNotice from "../layout/AboutNotice.vue";

const tab= ref('about')



</script>
